<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>拖拽文件和文件夹</title>
    <style>
      .container {
        width: 1200px;
        height: 200px;
        margin: 10px auto;
        border: 2px solid indianred;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
    <script>
      const div = document.querySelector('.container')
      div.addEventListener('dragenter', (e) => {
        e.preventDefault()
      })
      div.addEventListener('dragover', (e) => {
        e.preventDefault()
      })
      const handleEntry = (entry) => {
        if (entry.isFile) {
          entry.file((file) => {
            console.log(file)
          })
          return
        }
        const reader = entry.createReader()
        reader.readEntries((entries) => {
          console.log(entries)

          for (const entry of entries) {
            handleEntry(entry)
          }
        })
      }
      div.addEventListener('drop', (e) => {
        e.preventDefault()
        const items = e.dataTransfer.items
        for (const item of items) {
          const entry = item.webkitGetAsEntry()
          handleEntry(entry)
        }
      })
    </script>
  </body>
</html>
